<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
    /*绘制*/
    /*也可以使用一个渐变的方案来填充*/
    /*创建一个渐变的方案*/
    /*x0,y0,x1,y1*/
    var linearGradient = ctx.createLinearGradient(100,100,500,400);
    linearGradient.addColorStop(0,'pink');
    linearGradient.addColorStop(1,'blue');

    ctx.fillStyle = linearGradient;

    ctx.fillRect(100,100,400,100);

    /*线性渐变---->要素： 方向 起始颜色 结束颜色*/
    /*canvas中通过两个点的坐标可以控制渐变方向*/



</script>
</body>
</html>
